<template>
	<view class="content" :style="{background:$store.state.bgPrimaryColor}">
		<text class="title" v-if="lists.length > 0">{{title || ''}}</text>
		<text class="text_content">{{prompt !== null && prompt !== 'null' ? prompt : ''}}</text>
		<view class="_back" :style="{height:lists.length <= 5 ? '100vh' : 'auto'}">
			<view class="Flex" v-for="(item,index) in lists" :key="index"
				@click="linkUrl(`/pages/Mine/Course_classification?type_id=${item.type_id}&textbook_list_id=${item.id}&title=${item.title}&describe=${item.describe}`)">
				<view class="left">
					<view class="quan" :style="{border:`6rpx solid ${$store.state.primaryColor}`}"></view>
					<!-- <u--image :showLoading="true" src="../../static/Home/yuanquan.png" width="30rpx" height="30rpx"
						radius="0"></u--image> -->
					<view class="solid" v-if="index+1 !== lists.length"
						:style="{backgroundColor:$store.state.primaryColor,border:`2rpx solid ${$store.state.primaryColor}`}">
					</view>
				</view>
				<view class="listFlex">
					<view class="listLeft">
						<view :style="{backgroundColor:$store.state.primaryColor}">1</view>
						<text>{{item.title || ''}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		getTextbookTypeList
	} from '../../api/Mine.js';
	export default {
		data() {
			return {
				lists: [],
				title: '',
				prompt: ''
			}
		},
		onLoad(option) {
			this.title = option.title;
			this.prompt = option.prompt;
			this.getTextbookTypeList(option.id);
		},
		methods: {
			/** 
			@method 教材类型
			**/
			async getTextbookTypeList(id = null) {
				try {
					const res = await getTextbookTypeList({
						type_id: id
					});
					this.lists = [...res.data];
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			linkUrl(e) {
				uni.navigateTo({
					url: e
				});
			}
		}
	}
</script>
<style>
</style>
<style scoped lang="scss">
	.content {
		width: 100%;

		.title {
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 40rpx;
			color: #333333;
			display: block;
			margin-bottom: 35rpx;
			margin-left: 50rpx;
			margin-top: 100rpx;
		}

		.text_content {
			width: 90%;
			margin: 0px auto;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
			margin-left: 50rpx;
			margin-bottom: 50rpx;
			letter-spacing: 2rpx;
			display: block;
		}

		._back {
			width: auto;
			min-height: 100vh;
			height: 100vh;
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;
			background-color: #fbfbfc;
			margin-top: 70rpx;
			padding: 50rpx 30rpx 30rpx 30rpx;

			.Flex {
				display: flex;

				// align-items: center;
				.left {
					/deep/ .u-image {
						margin-top: 40rpx;
					}
				}

				.quan {
					width: 24rpx;
					height: 24rpx;
					border-radius: 50%;
					margin-top: 40rpx;
					// border:6rpx solid red;
				}

				.solid {
					width: 2rpx;
					height: 78rpx;
					background-color: rgba(2, 156, 254, 0.61);
					border: 2rpx solid rgba(2, 156, 254, 0.61);
					display: block;
					margin: 0px auto;
					margin-top: 20rpx;
				}

				.listFlex {
					width: 80%;
					height: 55rpx;
					background-color: #fff;
					padding: 20rpx 20rpx 20rpx 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-radius: 20rpx;
					margin-left: 30rpx;
					box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

					/* 添加阴影效果 */
					.listLeft {
						display: flex;
						align-items: center;

						view {
							width: 45rpx;
							height: 45rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							border-radius: 50%;
							background-color: #2282fe;
							color: #fff;
						}

						text {
							margin-left: 15rpx;
							font-weight: 500;
							color: #333;
						}
					}
				}
			}
		}
	}
</style>